<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自动生成10个背景色循环的li</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    body{background: #000;}
    #box{width: 591px;height: 80px;background: #fff;padding: 10px;margin: 200px auto;position: relative;}
    #In{position: absolute;left: 10px;top: 10px;}
    div{width: 50px;height: 50px;font-size: 30px;text-align: center;line-height:50px;position: absolute;left: 0;top: 40px;border: 1px solid #000;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var In = document.getElementById('In');
      var box = document.getElementById('box');
      var Div = box.getElementsByTagName('div');
      var arr = ["yellow","red","blue","green"];
      In.onclick = function (){
        for (var i = 0; i < 10; i++) {
          box.innerHTML += "<div>" + i + "</div>";
        };
        for (var i = 0; i < Div.length ; i++) {
          Div[i].style.left = 10 + 60 * i + "px";
           Div[i].style.background = arr[(i % arr.length)];
        };
      }
    }
  </script>
</head>
<body>
  <div id="box">
    <input id="In" type="button" value="自动生成10个LI">
  </div>
  
</body>
</html>